import React, { useEffect, useState } from 'react'

interface PageTransitionProps {
  children: React.ReactNode
  className?: string
}

export default function PageTransition({ children, className = '' }: PageTransitionProps) {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    // 延迟显示以确保页面过渡效果
    const timer = setTimeout(() => setIsVisible(true), 50)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div 
      className={`
        page-transition
        ${isVisible ? 'animate-fade-in-up' : 'opacity-0'}
        ${className}
      `}
    >
      {children}
    </div>
  )
}

// 卡片列表动画组件
export function AnimatedCardList({ children, className = '' }: { children: React.ReactNode, className?: string }) {
  return (
    <div className={`space-y-4 ${className}`}>
      {React.Children.map(children, (child, index) => (
        <div 
          key={index}
          className="card-animate"
          style={{ animationDelay: `${index * 100}ms` }}
        >
          {child}
        </div>
      ))}
    </div>
  )
}

// 列表项动画组件
export function AnimatedList({ children, className = '' }: { children: React.ReactNode, className?: string }) {
  return (
    <div className={className}>
      {React.Children.map(children, (child, index) => (
        <div 
          key={index}
          className="list-item-animate"
          style={{ animationDelay: `${index * 50}ms` }}
        >
          {child}
        </div>
      ))}
    </div>
  )
}
